<template>
  <div style="height: 765px;" class="note" :style ="note">

    <el-row :gutter="0" style="border: 1px solid white;margin-top: 20px">
      <el-col :span="24" :offset="0" style="text-align: left">
        <div style="border-bottom: 1px solid red">
          <el-button type="text " icon="el-icon-c-scale-to-original" style="text-align: center;font-size: x-large ">用户登录</el-button>
        </div>
      </el-col>
    </el-row>

    <div style="margin-top: 50px;margin-right: 30px;padding-top: 150px">

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名" class="item">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" class="item">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item style="margin-right: 50px;margin-top: 30px">
          <el-button @click="tiaozhuan()" style="margin-right: 40px">取消</el-button>
          <el-button type="primary" @click="onSubmit"  :plain="true" >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        form: {},
        note: {
          /*  backgroundImage: "url(" + require("../assets/16025846693882.jpg") + ")",*/
          backgroundImage: "url(" + require("../../../assets/20201111172528.png") + ")",
          /* backgroundImage:'url(//wegame.gtimg.com/g.2001399-r.15082/info/0e0c93073be2b00794bb569779949f68.jpg/320)',*/
          backgroundSize:'100% 100%',
        },
      }
    },
    methods: {

      tiaozhuan:function(){
        this.$router.push("/personal")
      },
      onSubmit:function () {
        console.log(this.form);3
        axios.post("http://localhost:9999/credit-user/login",this.form).then(res=>{
          if(res.data.code==100000){
            //登录成功的话，将tooken存在cookie中，
            var token=res.data.message;
            this.$cookie.set("token",token);
            this.$router.push("/borrow");
          }else{
            var mess=res.data.message;
            this.$message(mess);
            //弹出用户名或者密码错误提示
          }
        })
      }
    }
  }
</script>

<style >

  .item .el-form-item__label{
    color: black;
    font-size: large;
  }
</style>
